<template>
  <div class="addressBar">
    <div class="addressBar__inputBox" @click="selectStart">
        <i class="iconfont icon-dot start"></i>
        <span class="start">{{startPos.name||startPos.addr}}</span>
    </div>
    
    <div class="line"></div>

    <div class="addressBar__inputBox" @click="selectEnd">
        <i class="iconfont icon-dot end"></i>
        <span class="end">{{endPos.name||endPos.addr}}</span>
    </div>
    <transition name="slide_in_bottom">
        <div class="searchWrap" v-show="searchBoxShow">
            <search-box :addrType="addrType" @selectAddr="addAddr" @cancel="searchBoxShow=false"></search-box>
        </div>
    </transition>
  </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import {addressSearch} from '@s/map.js'
    import searchBox from '@/components/common/searchBox/searchBox'
    export default {
        name:'addressBar',
        data(){
            return{
                searchBoxShow:false,
                addrType:'start'
            }
        },
        components:{searchBox},
        computed:{
            ...mapGetters(['myPos','startPos','endPos'])
        },
        methods:{
            selectStart(){
                //开始地址 弹出地址选择器
                this.addrType = 'start'
            // 搜索附近地址
                addressSearch({
                    searchType:'circle',
                    keyword:'商务楼宇,大厦', //车站
                    circle:{
                        lat:this.myPos.lat,
                        lng:this.myPos.lng
                    },
                    callback:(res)=>{
                        this.$store.dispatch('loadAddrList',res.detail.pois)
                        this.searchBoxShow = true
                    }
                })
            },
            selectEnd(){
                //目的地址 弹出地址选择器
                this.addrType = 'end'
                // 搜索城市
                addressSearch({
                    keyword:'车站', //车站
                    callback:(res)=>{
                        this.$store.dispatch('loadAddrList',res.detail.pois)
                        this.searchBoxShow = true
                    }
                })
            },
            addAddr(pos){
                this.searchBoxShow=false;
                
                let travel = '';
                if(this.addrType=='start'){
                    travel = 'selectAddr';
                    this.$store.dispatch('location',{type:'startPos',pos})
                }else{
                    this.$store.dispatch('location',{type:'endPos',pos})
                    travel = 'callDriver';
                }

                this.$store.dispatch('switchTravel',travel)
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../../../style/var.scss';

    span{
        display: inline-block;
        width:100%;
        height:100%;
        color:$font_color_sub;
    }
    .iconfont{
        padding:0 10px;
        font-size: 30px;
        
        &.start{
            color:$fill_green;
        }
        &.end{
            color:rgb(255,102,51);
        }
    }
    @b addressBar{
        width:100%;
        background-color:$fill_light;
        border-radius: 10px;
        overflow:hidden;
        box-shadow: 0 0 10px 5px $border_base;
        @e inputBox{
            display: flex;
            align-items:center;
            justify-content: space-between;
            padding:20px;
        }
    }

    .searchWrap{
        position: fixed;
        top:0;
        left:0;
        z-index: 999;
        width:100%;
        height:100%;
    }
    .line{
        height:1px;
        margin-left:125px;
        background-color:$border_base;
    }

</style>
